 import {
   getCateListApi
 } from '@/api/cate'
 import {
   getParamsByCatIdApi,
   addParamsApi,
   updateParamsApi
 } from '@/api/params'
 // 导入mixin
 import dialog from '@/mixins/addDialogClosed'
 export default {
   // 使用minins选项
   mixins: [dialog],
   data() {
     return {
       // 属性所属的分类id
       selectedCatId: [],
       // 分类数据
       cateList: [],
       // 参数规则
       // 级联菜单的配置项
       cascaderOptions: {
         // 是hover方式展开
         expandTrigger: 'hover',
         // 级联菜单收集的是id数据
         value: 'cat_id',
         // 显示的数据属性
         label: 'cat_name',
         // 层级之间的关联属性
         children: 'children',
         // 可以选中任意一级分类
         checkStrictly: true
       },
       // 默认激活哪个选项卡
       activeName: 'many',
       // 动态参数
       manyParams: [],
       // 静态属性
       onlyParams: [],
       // 添加对话框的显示和隐藏的控制变量
       addDialogVisible: false,
       // 添加属性表单数据
       addForm: {
         attr_name: ''
       },
       // 添加属性的验证规则
       addFormRules: {
         attr_name: [{
           required: true,
           message: '请输入属性名称',
           trigger: 'blur'
         }]
       }
       // 控制按钮和input的切换效果(由各行数据进行绑定)
       // inputVisible: false,
       // 文本框的输入数据
       // inputValue: '',
     }
   },
   created() {
     this.getCateList()
   },
   // 定义计算属性
   computed: {
     // 添加按钮是否禁用
     isDisabled() {
       if (this.selectedCatId.length === 3) {
         return false
       } else {
         return true
       }
     },
     // 获取分类id:是三级分类
     catId() {
       if (this.selectedCatId.length === 3) {
         return this.selectedCatId[this.selectedCatId.length - 1]
       }
       return null
     },
     // 获取添加对话框的标题信息
     titleText() {
       // 根据选中的tabs选项卡的值来进行计算
       if (this.activeName === 'many') {
         return '动态参数'
       } else {
         return '静态属性'
       }
     }
   },
   // 侦听器侦听级联菜单的值，实现级联的收起
   watch: {
     selectedCatId() {
       this.$refs.cateHandle.dropDownVisible = false
     }
   },
   methods: {
     // 获取所有的分类数据
     async getCateList() {
       this.cateList = await getCateListApi({
         type: 3
       })
     },
     // 监听级联菜单的改变
     handleChange() {
       // 实现下拉框自动收起效果，也可以使用侦听器，侦听选择值的改变就触发
       // this.$refs.cateHandle.dropDownVisible = false
       // console.log(this.selectedCatId);
       // 约束只能选择三级分类作为属性的分类id,如果选择了一、二级，让级联选择框置空
       if (this.selectedCatId.length !== 3) {
         // 清空属性数据
         this.manyParams = []
         this.onlyParams = []
         // 清除级联菜单的显示
         this.selectedCatId = []
         // this.$message.error('请选择三级分类')
         return
       }
       // 获取被选中的tabs选项卡的数据
       this.getParams(this.activeName)
     },
     // 获取分类参数
     async getParams(type) {
       if (!this.catId) {
         return this.$message.error('请先选择三级分类菜单')
       }
       // 获取当前默认选中的参数列表(动态参数和静态属性),并分别进行赋值
       if (type === 'only') {
         const data = await getParamsByCatIdApi(this.catId, 'only')
         // 数据进行处理，满足我们需求
         data.forEach(item => {
           if (item.attr_vals) {
             // attr_vals的字符串转换为数组
             item.attr_vals = item.attr_vals.split(' ')
           } else {
             item.attr_vals = []
           }
           // 添加控制按钮和input的切换
           item.inputVisible = false
           // 添加收集到的属性值
           item.inputValue = ''
         })
         // 此时onlyParams的所有属性都是响应式的
         this.onlyParams = data
         // console.log(this.onlyParams);
       } else {
         this.manyParams = await getParamsByCatIdApi(this.catId, 'many')
         // 数据进行处理，满足我们需求
         // 切记：给data中数据对象添加新的属性，数据会改变，但是对新增属性的修改不是响应式
         this.manyParams.forEach((item, index) => {
           if (item.attr_vals) {
             // attr_vals的字符串转换为数组
             item.attr_vals = item.attr_vals.split(',')
           } else {
             item.attr_vals = []
           }
           // 这种方法添加的属性不是响应式：
           // 以下是错误的写法
           // 添加控制按钮和input的切换
           // item.inputVisible =false
           // 添加收集到的属性值
           // item.inputValue = ''

           // 添加控制按钮和input的切换
           this.$set(item, 'inputVisible', false)
           // 添加收集到的属性值
           this.$set(item, 'inputValue', '')
           // 也可以一次性添加多个属性
           //  this.manyParams[index]=Object.assign({},this.manyParams[index],{inputVisible:false,inputValue:''});
         })
         console.log(this.manyParams)
       }
     },
     // 监听选项卡的切换事件
     handleClick() {
       // 获取被选中的tabs选项卡的数据
       this.getParams(this.activeName)
     },

     // 添加属性或者参数
     /*
          // 监听添加对话框的关闭事件
          addDialogClosed() {
            this.$refs.addFormRef.resetFields()
          }, */
     // 添加属性入口
     addParams() {
       this.$refs.addFormRef.validate(async valid => {
         if (!valid) return
         this.addForm.attr_sel = this.activeName
         await addParamsApi(this.catId, this.addForm)
         this.$message.success('添加成功')
         this.addDialogVisible = false
         this.getParams(this.activeName)
       })
     },
     // 添加属性值
     handleInputConfirm(row) {
       // 实现属性值的添加
       if (row.inputValue.trim() === '') {
         row.inputVisible = false
         return
       }
       // 更新属性值
       row.attr_vals.push(row.inputValue)
       this.saveAttrVals(row)
     },
     // 删除属性值
     removeAttrVal(row, i) {
       // 移除数组的数据
       row.attr_vals.splice(i, 1)
       // 更新数据
       this.saveAttrVals(row)
     },

     // 更新属性值
     async saveAttrVals(row) {
       // 更新属性值或者名称的接口
       await updateParamsApi(this.catId, row.attr_id, {
         attr_sel: row.attr_sel,
         attr_name: row.attr_name,
         // 动态参数：要求传递的是以 ","分隔的字符串；静态属性：要求传递的是以 " "分隔的字符串
         attr_vals: row.attr_sel === 'many' ? row.attr_vals.join() : row.attr_vals.join(' ')
       })
       this.$message.success('更新属性值成功')
       // 切换成button按钮
       row.inputValue = ''
       row.inputVisible = false
     },
     // 点击按钮，显示文本输入框，并且获取焦点
     showInput(row) {
       row.inputVisible = true
       // dom的更新是异步，不能在数据改变后立刻拿到dom对象，$nextTick的作用是保证dom更新完成后再执行
       this.$nextTick(_ => {
         // dom的focus()实现获取焦点
         this.$refs.saveTagInput.$refs.input.focus()
       })
     }
   }
 }
